$min-width: 680px

@mixin active
  background: linear-gradient(53deg, $blue, $dark-blue)
  background-size: 400% 400%

@mixin disabled
  &[disabled]
    background: linear-gradient(53deg, $light-grey, $dark-grey)
    background-size: 600% 600%
  &[disabled]:hover::before
    display: none
  &[disabled]:hover
    color: rgba(0, 0, 0, 0.34)

.z-hlayout-inner
  z-index: 3

$animation_length: 0.14s
$bradius: 40px
$min-width: 48px
$min-height: 48px
$width: 160px
$height: 50px

@mixin btn-props
  min-width: $min-width
  min-height: $min-height
  max-width: 100%
  max-height: 100%
  white-space: normal
  word-wrap: break-word
  border-radius: $bradius
  width: $width
  height: $height
  font-size: small !important
  font-weight: bold !important
  text-transform: uppercase

.transparent-btn
  @include btn-props
  background: transparent
  border: solid 2px $dark-blue
  color: $dark-blue

  width: $width/2 + 20
  height: $height

  min-width: 24px
  min-height: 24px
  max-width: 100%
  max-height: 100%

@media screen and (min-width: $min-width)
  %big-btn
    z-index: 1
    @include btn-props
    animation: btn-gradient 15s ease alternate infinite

    &:hover
      background: transparent
      color: $dark-blue
      transition: all $animation_length ease-in-out

    &::before
      z-index: -1
      content: ''
      position: absolute
      top: 100%
      bottom: 100%
      left: 100%
      right: 100%
      background-color: $dark-blue

    &:hover::before
      max-height: 100%
      max-width: 100%
      background-color: white
      border-radius: $bradius
      top: 0
      bottom: 0
      left: 0
      right: 0
      border: solid 2px $dark-blue
      transition: all $animation_length ease-in-out

  .n-btn, .n-upload-btn
    @extend %big-btn
    @include active
    @include disabled

  .n-proceed
    @extend %big-btn
    margin:
      top: 100px
    @include active
    @include disabled

  .n-block-btn
    @extend %big-btn
    display: inline-block
    @include active
    @include disabled

  .n-btn-small
    @extend %big-btn
    @include active
    @include disabled

    width: $width/2 + 10
    height: $height

    min-width: 24px
    min-height: 24px
    max-width: 100%
    max-height: 100%

@media screen and (max-width: $min-width)
  %small-btn
    min-width: 48px
    min-height: 48px
    max-width: 100%
    max-height: 100%
    white-space: normal
    word-wrap: break-word
    border-radius: 40px

  $buttons: btn, upload-btn, proceed
  @each $style in $buttons
    .n-#{$style}
      @extend %small-btn
      @include active
      @include disabled

@keyframes btn-gradient
  0%
    background-position:
      x: 0
      y: 50%
  50%
    background-position:
      x: 50%
      y: 50%
  100%
    background-position:
      x: 100%
      y: 50%

.selected-option
  background: $blue !important
  color: white !important
  transition: all 0.34s

.job-remove
  background: red
  color: lightgrey
  border: solid 0.2vh lightgrey
  transition: all $animation_length ease-in-out

  &:hover
    background: orangered
    box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.16)
    transition: all $animation_length ease-in-out
